﻿var readyToUpdate = 0;

/**
 *   Cancelling the updating interface by switching off the details-tomodify panel
*/
function cancelFunction() {
    var delConfirm = $(this).parent().parent();
    var delBackground = delConfirm.parent().children('.del-background');
    delConfirm.hide();
    delBackground.hide();
    readyToUpdate = 0;
}

/**
*   Mouse animation functions
*/
function mouseoverDisplayImg() {
    if (readyToUpdate == 0) {
        $(this).addClass('img-display-focus');
        $(this).children('div').children('.img_details').show();
        $(this).children('div').children('.edit-tools').show();
    }
}

function mouseoutDisplayImg() {
    if (readyToUpdate == 0) {
        $(this).removeClass('img-display-focus');
        $(this).children('div').children('.img_details').hide();
        $(this).children('div').children('.edit-tools').hide();
    }
}

function mouseoverEditTools() {
    $(this).addClass('hover');
}
function mouseoutEditTools() {
    $(this).removeClass('hover');
}

/**
*   Tools Function
*/

function centerBoxInsideParent(box, parent) {
    var boxPositionTop = (parent.outerHeight() / 2) - (box.outerHeight() / 2);
    var boxPositionLeft = (parent.outerWidth() / 2) - (box.outerWidth() / 2);
    box.css({
        'top': boxPositionTop + 'px',
        'left': boxPositionLeft + 'px'
    });
}

function goDeleteMode() {
    readyToUpdate = 1;
    var updatePanel = $(this).parent().parent();
    var delDiv = updatePanel.children('.del-background');
    var delConfirm = updatePanel.children('.del-confirm');

    var detailsDiv = updatePanel.children('.img_details');
    var detailsHeight = detailsDiv.height();

    var displayDiv = updatePanel.parent();
    var displayHeight = displayDiv.height();

    delDiv.height(detailsHeight + displayHeight);
    centerBoxInsideParent(delConfirm, delDiv);
    delDiv.show();
    delConfirm.show();
}

function goEditMode() {
    readyToUpdate = 1;
    var detailsDisplay = $(this).parent().parent().children('.img_details');
    var detailsEdition = $(this).parent().parent().children('.img_details_modify');
    $(this).parent().hide();
    detailsDisplay.hide();
    detailsEdition.show();
}

/**
*   updating functions
*/

function onUpdatingImageDetails(updatePanelDiv) {
    // Display background
    var divDetailsModified = $(updatePanelDiv).children('.img_details_modify');
    divDetailsModified.children('div').children("input[type='text']").attr('disabled', 'disabled');
    divDetailsModified.children('div').children('textarea').attr('disabled', 'disabled');
    $(updatePanelDiv).children('edit-del-butt').children('div').children("input[type='submit']").attr('disabled', 'disabled');

    //Dispaly loading pnl
    var background = $(updatePanelDiv).children('.del-background');
    var detailsHeight = divDetailsModified.outerHeight();

    var displayDiv = $(updatePanelDiv).parent();
    var displayHeight = displayDiv.height();

    background.height(detailsHeight + displayHeight);

    var loading = $(updatePanelDiv).children('.loading');
    centerBoxInsideParent(loading, background);
    loading.show();
}

function onUpdatedImageDetails(updatePanelDiv) {
    $(updatePanelDiv).children('.loading').hide();
    $(updatePanelDiv).parent().removeClass('img-display-focus');

    var divDetailsModified = $(updatePanelDiv).children('.img_details_modify');
    divDetailsModified.children('div').children("input[type='text']").removeAttr('disabled');
    divDetailsModified.children('div').children('textarea').removeAttr('disabled');
    $(updatePanelDiv).children('edit-del-butt').children('div').children("input[type='submit']").removeAttr('disabled');

    //Rebind functions

    //ImgDisplay
    $(updatePanelDiv).parent().bind('mouseout', mouseoutDisplayImg);
    $(updatePanelDiv).parent().bind('mouseover', mouseoverDisplayImg);
    
    //Edit tools
    $(updatePanelDiv).children('.edit-tools').children('div').bind('mouseover', mouseoverEditTools);
    $(updatePanelDiv).children('.edit-tools').children('div').bind('mouseout', mouseoutEditTools);

    $(updatePanelDiv).children('.edit-tools').children('.edit-tool').bind('click', goEditMode);
    $(updatePanelDiv).children('.edit-tools').children('.del-tool').bind('click', goDeleteMode);

    $(updatePanelDiv).children('.del-confirm').children('.edit-del-butt').children('.edit-del-cancel').bind('click', cancelFunction);
    $(updatePanelDiv).children('.img_details_modify').children('.edit-del-butt').children('.edit-del-cancel').bind('click', cancelFunction);

    positionningImageDisplay($(updatePanelDiv).parent());
    
    readyToUpdate = 0;
}


function positionningImageDisplay(img) {
    var imgContainer = $(img).children('div').children('.img_container');
    var imgDetails = $(img).children('div').children('.img_details');
    var imgDetailsEdition = $(img).children('div').children('.img_details_modify');
    var leftPositionInt = parseInt(imgContainer.position().left, 10) - parseInt(imgContainer.css('border-left-width'), 10)
    var leftPosition = leftPositionInt + 'px';
    imgDetails.css({ 'left': leftPosition });
    imgDetailsEdition.css({ 'left': leftPosition });
}

$(function () {
    $(document).ready(function () {
        // Click on edit icon, all details are editable

        $('.img_display').bind('mouseout', mouseoutDisplayImg);
        $('.img_display').bind('mouseover', mouseoverDisplayImg);

        $('.edit-del-cancel').bind('click', cancelFunction);
        $('.edit-tools').children('div').bind('mouseover', mouseoverEditTools);
        $('.edit-tools').children('div').bind('mouseout', mouseoutEditTools);

        $('.edit-tools').children('.edit-tool').bind('click', goEditMode);
        $('.edit-tools').children('.del-tool').bind('click', goDeleteMode);

        $('.img_display').each(function () {
            var img = $(this);
            positionningImageDisplay(img);
        });
    });
});

